import { h } from 'vue';
import type { RowData } from 'naive-ui/es/data-table/src/interface';
import { longDateTimeToString, longDateToString, longMonthToString } from './date';

export function longDateTimeRender(column: string) {
  return (row: RowData) => {
    if (!row[column]) {
      return h('span', null, '');
    }
    return h('span', null, longDateTimeToString(Number.parseInt(row[column], 10)));
  };
}

export function longDateRender(column: string) {
  return (row: RowData) => {
    if (!row[column]) {
      return h('span', null, '');
    }
    return h('span', null, longDateToString(Number.parseInt(row[column], 10)));
  };
}

export function longMonthRender(column: string) {
  return (row: RowData) => {
    if (!row[column]) {
      return h('span', null, '');
    }
    return h('span', null, longMonthToString(Number.parseInt(row[column], 10)));
  };
}

export function enumRender(column: string, enumType: any) {
  return (row: RowData) => enumType[row[column] as keyof typeof enumType];
}

export function avatarRender(column: string) {
  const style = 'width:30px;height:auto;background-color:#dedede;';
  return (row: RowData) => {
    if (!row[column]) {
      return h('img', { src: '', style }, '');
    }
    return h('img', { src: row[column], style }, '');
  };
}

export function groupAvatarRender(column: string) {
  const style = 'width:30px;height:auto;background-color:#dedede;';
  return (row: RowData) => {
    if (!row[column]) {
      return h('img', { src: '', style }, '');
    }
    const img = JSON.parse(row[column])[0];
    return h('img', { src: img, style }, '');
  };
}
